<template>
	<view class="cart-container">
     <my-adress></my-adress>
     
    <view class="title">
      <uni-icons type="shop" size="20"></uni-icons>
      <view class="content">
        购物车
      </view>
    </view>
    
 <uni-swipe-action class='swipe'>
   <block  v-for='(item,i) in cart' :key='i'>
     <!-- 自定删除操作按钮的配置信息 -->
     <uni-swipe-action-item :options="options" @click="swipeDel(item)">
             <goods-detail :goods='item' :showRadio='true' @radio='radioChange(item)' @num='numChange()'></goods-detail>
     </uni-swipe-action-item>
   </block>
 </uni-swipe-action>
 
 <!-- 结算区域 -->
      <my-settle></my-settle>
	</view>
</template>

<script>
  import {mapGetters,mapState,mapMutations} from 'vuex'
  import badgeMix from '@/mixins/tabBar-badge.js'
	export default {
    mixins:[badgeMix],
    onShow() {
  
    },
    computed:{
      ...mapState('m_cart',['cart'])
    },
		data() {
			return {
				options:[{
          text:'删除',
          style:{
            backgroundColor:'#c00000'
          }
        }]
			};
		},
    
    methods:{
      ...mapMutations('m_cart',['updateGoodsState','updateGoodsCount','delGoodsById']),
      radioChange(e){
        this.updateGoodsState(e)
      },
      
      numChange(e){
        this.updateGoodsCount(e)
      },
      
      swipeDel(e){
        this.delGoodsById(e)
      }
    }
	}
</script>

<style lang="scss">
  .cart-container{
    .title{
      display: flex;
      // justify-content: center;
      // align-items: center;
      padding: 10px;
      border-bottom: 1px solid #efefef;
      .content{
        padding: 0 10px;
      }
    }
    .swip{
      margin-bottom: 50px;
    }
  }
</style>
